<html>

<style>
    * {
        margin: 0;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

        // 1. 创建三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        // MeshBasicMaterial MeshLambertMaterial MeshPhongMaterial
        const material = new THREE.MeshPhongMaterial({
            color: 0x00ffff, //设置材质颜色
            transparent: false,//开启透明
            opacity: 0.5,//设置透明度
        });

        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh)


        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(10);
        scene.add(axesHelper);

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 50);
        camera.position.set(4, 2, 4)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer({
            antialias: true,
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        // 设置相机控件轨道控制器OrbitControls
        new OrbitControls(camera, canvasDom);


        // 2. 打光 PointLight DirectionalLight
        const light = new THREE.PointLight(0xffffff, 1.0);
        light.position.set(6, 0, 3);
        scene.add(light);


        // 3. gui相关设置
        // 3.1 初体验：值范围默认就是一个拉动的滚动条
        // 实例化一个gui对象
        const gui = new GUI();
        //改变交互界面style属性
        gui.domElement.style.right = '0px';

        // 光照强度属性.intensity
        gui.add(light, 'intensity', 0, 2.0).name('光强度').step(0.1);
        gui.add(light.position, 'y', -5, 8).name('光y轴角度');
        // mesh.position对象的xyz属性

        const obj = {
            color: 0x00ffff,
            bool: false,
        };
        // .addColor()生成颜色值改变的交互界面
        gui.addColor(obj, 'color').onChange(function (value) {
            mesh.material.color.set(value);
        });

        // 3. 属性数据类型是布尔值，交互界面是单选框
        gui.add(obj, 'bool').name('是否旋转');
        // 参数3是一个数组，生成交互界面是下拉菜单
        gui.add(light.position, 'y', [-5, 0, 2, 3, 8]).name('光y轴角度');
        gui.add(light.position, 'y', {
            上: 8,
            中: 0,
            下: -5,
        }).name('光y轴角度');

        // gui可以分组
        // 创建材质子菜单
        const matFolder = gui.addFolder('坐标');
        matFolder.add(mesh.position, 'x', -10, 10).onChange(value => {
            mesh.position.x = value;
            // 你可以写任何你想跟着obj.x同步变化的代码
            // 比如mesh.position.y = value;
        });
        matFolder.add(mesh.position, 'y', -10, 10);
        matFolder.add(mesh.position, 'z', -10, 10);
        matFolder.close();


        function render() {
            if (obj.bool) mesh.rotateY(0.01);

            renderer.render(scene, camera);
            requestIdleCallback(render)
        }
        render()
    </script>
</body>

</html>